<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vibe Kanban | AI看板管理工具</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8f9fa;
            color: #212529;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 1.5rem;
            color: white;
            font-size: 1.5rem;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 3.5rem;
            line-height: 3.5rem;
            padding-right: 0.5rem;
            margin-top: 0.2rem;
            font-weight: 700;
            color: #6e8efb;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col lg:flex-row items-center">
                <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif tracking-tight">Vibe Kanban</h1>
                    <h2 class="text-xl md:text-2xl font-medium mb-6 opacity-90">基于AI的智能看板管理工具</h2>
                    <p class="text-lg mb-8 opacity-90">专为开发团队设计，通过人工智能技术自动生成任务卡片、优化工作流程，并智能分配资源，提高团队协作效率。</p>
                    <a href="https://github.com/BloopAI/vibe-kanban" target="_blank" class="inline-block bg-white text-indigo-600 hover:bg-opacity-90 text-lg font-medium py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105">
                        <i class="fab fa-github mr-2"></i>访问GitHub项目
                    </a>
                </div>
                <div class="lg:w-1/2">
                    <div class="bg-white bg-opacity-20 p-6 rounded-xl backdrop-blur-sm">
                        <div class="mermaid">
                            graph TD
                            A[AI编程助手] --> B[Vibe Kanban]
                            B --> C[任务编排]
                            B --> D[进度跟踪]
                            B --> E[统一配置]
                            C --> F[前端开发]
                            C --> G[后端开发]
                            C --> H[测试编写]
                            D --> I[看板视图]
                            D --> J[状态管理]
                            E --> K[集中配置]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold font-serif mb-4">它能解决什么问题？</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">当多个AI助手同时工作时，管理混乱的问题</p>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-6 rounded-xl card-hover">
                    <div class="feature-icon bg-red-400">
                        <i class="fas fa-question"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">任务状态混乱</h3>
                    <p class="text-gray-600">不知道哪个AI助手在执行什么任务，任务进展如何</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl card-hover">
                    <div class="feature-icon bg-yellow-400">
                        <i class="fas fa-random"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">协作效率低下</h3>
                    <p class="text-gray-600">多个AI助手之间缺乏协调，各自为战</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl card-hover">
                    <div class="feature-icon bg-green-400">
                        <i class="fas fa-cog"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">配置管理繁琐</h3>
                    <p class="text-gray-600">每个AI助手需要单独配置，维护成本高</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold font-serif mb-4">主要功能</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Vibe Kanban 的核心功能特性</p>
            </div>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
                    <div class="flex items-start">
                        <div class="bg-blue-100 text-blue-600 rounded-full w-12 h-12 flex items-center justify-center mr-4">
                            <i class="fas fa-exchange-alt text-xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold mb-3">AI助手切换器</h3>
                            <p class="text-gray-600">像切换工具一样轻松在不同AI编程助手之间切换，无需重复配置，提高工作效率。</p>
                        </div>
                    </div>
